<template>
  <div class="cleanliness-score-card">
    <div class="card-header">
      <div class="icon-header">
        <div class="icon">
          <img :src="iconPath" :alt="`${title} icon`" />
        </div>
      </div>
      <div class="title">{{ title }}</div>
    </div>
    <div class="chart-container">
      <div></div>
      <PieChart
        :option="pieChartOptions"
        style="height: 270px; width: 323px"
      ></PieChart>
    </div>
    <div></div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
import defaultIcon from "@/assets/pieIcon/bigbed.png";

export default {
  components: {
    PieChart,
  },
  props: {
    headerTitle: String,
    iconPath: {
      type: String,
      default: defaultIcon,
    },
    showScoreRange: {
      type: Boolean,
      default: false,
    },
    showLegend: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
    currentMatchedCategory: {
      type: Object,
    },
    iconPath: {
      // 接收从子组件（DetailPop）传来的图标路径
      type: String,
      default: () => import("@/assets/pieIcon/bigbed.png"), // 保留默认图标
    },
  },
  data() {
    return {
      Cleanness: "",
      pieChartOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          show: true,
          orient: "vertical",
          left: 0,
          bottom: 5,
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 15,
          textStyle: {
            fontSize: 14,
            color: "#666",
            rich: {
              count: {
                fontWeight: "bold",
                color: "#333",
              },
            },
          },
          formatter: (name) => {
            const data = this.pieChartOptions.series[0].data.find(
              (d) => d.name === name
            );
            const total = this.totalCount;
            // Handle case when total is 0
            const percentage =
              total === 0 ? 0 : Math.round((data.value / total) * 100);
            return `${name} ${data.value} (${percentage}%)`;
          },
        },
        graphic: {
          type: "text",
          left: "center",
          top: "28%",
          silent: true,
          style: {
            text: this.currentMatchedCategory.score,
            textAlign: "center",
            fill: "#000",
            fontSize: 18,
            fontWeight: "bold",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            top: "10%",
            left: "10%",
            right: "10%",
            bottom: "50%",
            radius: ["75%", "90%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            minAngle: 1, // 设置最小角度为1度，避免小比例扇形被隐藏
            padAngle: 5,
            silent: true,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2, // 适当减小边框宽度
              borderRadius: 10, // 相应减小圆角
            },
            label: {
              show: true,
              formatter: function (params) {
                // Handle case when total is 0
                const total =
                  params.data.value +
                  (params.data.name === "Positive"
                    ? 0
                    : params.data.name === "Neutral"
                    ? 0
                    : 0);
                return total === 0 ? "0%" : Math.round(params.percent) + "%";
              },
              position: "outside",
              padding: [0, -30],
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: [
              {
                value: Math.max(this.currentMatchedCategory?.positive),
                itemStyle: { color: "#2FAA68" },
                name: "Positive",
              },
              {
                value: Math.max(this.currentMatchedCategory?.neutral),
                itemStyle: { color: "#EFB82C" },
                name: "Neutral",
              },
              {
                value: Math.max(this.currentMatchedCategory?.negative),
                itemStyle: { color: "#CE4049" },
                name: "Negative",
              },
            ],
          },
        ],
      },
    };
  },
  computed: {
    totalCount() {
      return (
        (this.currentMatchedCategory?.negative || 0) +
        (this.currentMatchedCategory?.neutral || 0) +
        (this.currentMatchedCategory?.positive || 0)
      );
    },
  },
  methods: {
    goDetails(headerTitle) {
      this.$emit("clickTitle", headerTitle);
    },
  },
  mounted() {
    console.log(
      "接收到子组件传来的内部饼图的数据",
      this.currentMatchedCategory
    );
  },
};
</script>

<style scoped lang="scss">
.cleanliness-score-card {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #dbdbdb;
  background: #fff;
  border-radius: 16px;

  .card-header {
    display: flex;
    align-items: center;
    .icon-header {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1px solid #ccc;
      width: 24px;
      height: 24px;
      box-sizing: border-box;
      margin-right: 8px;
      .icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 15px;
        height: 15px;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
  }

  .chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
